<template>
    <div
        class="insRecordExport"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <el-form
            class="searchForm"
            ref="searchForm"
            label-position="right"
            size="small"
            label-width="120px"
            :model="formData"
            :rules="rules"
        >
            <el-row>
                <el-col :span="6">
                    <el-form-item label-position="left" prop="ctime1" label="起始日期:">
                        <el-date-picker
                            v-model="formData.ctime1"
                            type="datetime"
                            placeholder="请选择起始日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss"
                            :picker-options="startOptions"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="ctime2" label-position="left" label="结束日期:">
                        <el-date-picker
                            v-model="formData.ctime2"
                            type="datetime"
                            placeholder="请选择结束日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss"
                            :picker-options="endtOptions"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="坐席ID:" label-position="left" prop="agentid">
                        <el-input v-model="formData.agentid" placeholder="请输入坐席ID"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="分期计划编号:" label-position="left" prop="planno">
                        <el-input v-model="formData.planno" placeholder="请输入分期计划编号"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 按钮 -->
            <el-row class="buttonBox">
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="handleSearch"
                >查 询</el-button>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-refresh-right"
                    @click="handleReset"
                >重 置</el-button>
                <el-button type="primary" size="small" @click="handleExport">导 出</el-button>
            </el-row>
        </el-form>

        <!-- 表格数据展示模块 -->
        <el-table stripe class="heard-bg" :data="tableData" border>
            <el-table-column v-for="(item, index) in tableColumn" :key="index" :label="item.label">
                <template slot-scope="scope">
                    <span v-if="item.value === 'operate'">
                        <el-button size="small" type="text">详情</el-button>
                    </span>
                    <span v-else>{{scope.row[item.value]}}</span>
                </template>
            </el-table-column>
        </el-table>

        <Pagination
            :hanleChangeCurrentPage="hanleChangeCurrentPage"
            :handleChangeSize="handleChangeSize"
            :total="total"
            :pageSize="pageSize"
            :currentPage="currentPage"
        />
    </div>
</template>
<script>
import { mapState } from 'vuex';
import moment from 'moment';
import request from '@/apis/request';
import { eachProp } from '@/utils/Object';
import { isNull } from '@/utils/Common';
import Pagination from '@/components/Pagination/Pagination.vue';

export default {
    name: 'insRecordExport',
    components: {
        Pagination,
    },
    data() {
        return {
            pageLoading: false, // 页面loading
            formData: {
                ctime1: '', // 申请起始日期
                ctime2: '', // 申请截止日期
                agentid: '', // 坐席ID
                planno: '', // 分期计划编号
            },
            // 表格数据
            tableData: [],
            // 表格项
            tableColumn: [
                {
                    label: '序号',
                    value: 'id',
                },
                {
                    label: '坐席ID',
                    value: 'agentid',
                },
                {
                    label: '持卡人姓名',
                    value: 'custname',
                },
                {
                    label: '证件号',
                    value: 'custid',
                },
                {
                    label: '分期卡号',
                    value: 'custno',
                },
                {
                    label: '分期计划编号',
                    value: 'planno',
                },
                {
                    label: '期数',
                    value: 'monthnbr',
                },
                {
                    label: '分期金额',
                    value: 'instalamt',
                },
                {
                    label: '分期结果',
                    value: 'retcode',
                },
                {
                    label: '申请时间',
                    value: 'ctime',
                },
            ],
            total: 0, // 总数
            pageSize: 10, // 每页条数
            currentPage: 1, // 当前页码
            // 开始日期选择 限制
            startOptions: {
                disabledDate: (time) => {
                    if (this.formData.ctime2) {
                        return time.getTime() > new Date(moment(this.formData.ctime2).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },

            // 结束日期选择限制
            endtOptions: {
                disabledDate: (time) => {
                    if (this.formData.ctime1) {
                        return time.getTime() < new Date(moment(this.formData.ctime1).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },

            rules: {
                ctime1: [
                    { required: true, message: '请选择起始日期', trigger: 'blur' },
                ],
                ctime2: [
                    { required: true, message: '请选择截止日期', trigger: 'blur' },
                ],
            },
        };
    },

    mounted() {
        // this.handleSearch()
    },

    methods: {
        // 初始化列表查询
        handleSearch() {
            this.$refs.searchForm.validate((valid) => {
                if (valid) {
                    const time1 = new Date(moment(this.formData.ctime1).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    const time2 = new Date(moment(this.formData.ctime2).format('YYYY-MM-DD HH:mm:ss')).getTime();
                    if (time1 > time2) {
                        this.$alert('开始时间不能大于结束时间，请重新选择！', '提示', {
                            customClass: 'warning', type: 'warning',
                        });
                        this.formData.ctime1 = '';
                        this.formData.ctime2 = '';
                        return;
                    }
                    this.pageLoading = true;
                    const params = {
                        ...this.formData,
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                    };
                    this.$post.businessStatistics.getInsApplyList(params).then((res) => {
                        this.pageLoading = false;
                        if (res.status === 200 && res.data.success) {
                            this.tableData = res.data.content.page.records;
                            this.total = res.data.content.page.total;
                            if (this.tableData.length) {
                                this.$message.success('查询成功');
                            } else {
                                this.$alert(res.data.msg, '提示', {
                                    customClass: 'warning', type: 'warning',
                                });
                            }
                        } else {
                            this.$message.success('查询失败');
                        }
                    });
                } else {

                }
            });
        },

        // 点击导出 -> 导出流水记录表格
        handleExport() {
            this.$refs.searchForm.validate((valid) => {
                if (!valid) return;
                const data = {
                    ...this.formData,
                };
                let url = '/iccsrv/BudgetRequisi/download?';
                eachProp(data, (prop) => {
                    if (!isNull(data[prop])) {
                        url += `${prop}=${data[prop].toString()}&`;
                    }
                });
                url = url.substring(0, url.length - 1);
                request({
                    url,
                    method: 'get',
                    responseType: 'blob',
                }).then((res) => {
                    // console.log(res, '相应报文')
                    const blobUrl = window.URL.createObjectURL(new Blob([res.data]));
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.download = `installmentRecord_${new Date().getTime()}.xls`;
                    a.href = blobUrl;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                });
            });
        },

        // 点击重置搜索表单
        handleReset() {
            this.tableData = [];
            this.$refs.searchForm.resetFields();
        },

        // 切换分页大小
        handleChangeSize(val) {
            this.pageSize = val;
            // 重置页码
            this.currentPage = 1;
            this.handleSearch();
        },

        // 切换页码
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.handleSearch();
        },
    },
};
</script>
<style lang="scss" scoped>
.insRecordExport {
    min-height: 100%;
    background-color: #fff;
    // border-radius: 8px;
    overflow: hidden;
    padding: 20px;

    .searchForm {
        .el-row {
            text-align: left;
        }

        .buttonBox {
            text-align: right;
            margin-top: 10px;
            margin-bottom: 30px;
        }
    }
}
</style>
